<script setup lang="ts">
import { computed } from 'vue'
import { ElCard, ElStatistic, ElIcon } from 'element-plus'

interface Props {
  title: string
  value: number | string
  prefix?: string
  suffix?: string
  precision?: number
  icon?: any
  color?: string
  trend?: 'up' | 'down' | 'neutral'
  trendValue?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  precision: 0,
  color: '#409eff',
  trend: 'neutral'
})

const trendColor = computed(() => {
  switch (props.trend) {
    case 'up':
      return '#67c23a'
    case 'down':
      return '#f56c6c'
    default:
      return '#909399'
  }
})

const trendIcon = computed(() => {
  switch (props.trend) {
    case 'up':
      return '↗'
    case 'down':
      return '↘'
    default:
      return '→'
  }
})
</script>

<template>
  <ElCard class="status-card" shadow="hover">
    <div class="card-content">
      <div class="card-icon" :style="{ color: color }">
        <ElIcon v-if="icon" :size="32">
          <component :is="icon" />
        </ElIcon>
      </div>
      
      <div class="card-info">
        <div class="card-title">{{ title }}</div>
        
        <ElStatistic
          :value="value"
          :prefix="prefix"
          :suffix="suffix"
          :precision="precision"
          class="card-value"
          :value-style="{ color: color, fontSize: '24px', fontWeight: '600' }"
        />
        
        <div v-if="trendValue !== undefined" class="card-trend" :style="{ color: trendColor }">
          <span class="trend-icon">{{ trendIcon }}</span>
          <span class="trend-value">{{ trendValue }}</span>
        </div>
      </div>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.status-card {
  height: 120px;
  
  .el-card__body {
    height: 100%;
    padding: 16px;
  }
  
  .card-content {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 16px;
    
    .card-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: var(--el-color-primary-light-9);
      flex-shrink: 0;
    }
    
    .card-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      
      .card-title {
        font-size: 14px;
        color: var(--el-text-color-regular);
        margin-bottom: 4px;
      }
      
      .card-value {
        line-height: 1;
        
        :deep(.el-statistic__content) {
          font-size: 24px;
          font-weight: 600;
        }
      }
      
      .card-trend {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        
        .trend-icon {
          font-size: 14px;
        }
        
        .trend-value {
          font-weight: 500;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .status-card {
    .card-content {
      gap: 12px;
      
      .card-icon {
        width: 40px;
        height: 40px;
        
        .el-icon {
          font-size: 20px !important;
        }
      }
      
      .card-info {
        .card-title {
          font-size: 13px;
        }
        
        .card-value {
          :deep(.el-statistic__content) {
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>